<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script src="vue-router.js"></script>
	</head>
	<body>
		<div id="box">
			<router-link to="/user">用户</router-link>
			<router-link to="/register">注册</router-link>
			<div>
				我是根元素内容1
				<router-view></router-view>
				我是根元素内容2
			</div>
		</div>

		<script>
			var User = {
				template: `<h2> 我是户组件 </h2>`
			}
			var Register = {
				template: `<h2> 我是注册组件 </h2>`
			}
			var router = new VueRouter({
				routes: [{
						path: "/user",
						component: User
					},
					{
						path: "/register",
						component: Register
					}
				]
			})
			var vm = new Vue({
				el: "#box",
				data: {},
				router
			})
		</script>

	</body>
</html>
